<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取节点</title>
	</head>
	<body>
		<!-- 
		注意：操作dom必须等节点初始化完毕后，才能执行
		处理方式两种：
		（1）把script调用标签移到html末尾即可
		（2）使用onload事件来处理js，等待html加载完毕后加载onload事件里的js
		
		1、getElementById()   通过id获取dom对象，如果id重复，那么获取第一个为准
		2、getElementsByName()  通过name属性获取dom对象数组，常用于多选获取值
		3、getElementsByTagName() 通过标签名获取dom对象数组
		4、getElementsByClassName() 通过样式名获取dom对象数组
		
		 -->
		 <p id="p1" class="para">这是一个段落<span>文本</span></p>
		 <p id="p1" class="para">这是又一个段落</p>
		 <input type="text" name="text" />
		 <input type="checkbox" name="hobby" value="游泳"/>游泳
		 <input type="checkbox" name="hobby" value="篮球"/>篮球
		 <input type="checkbox" name="hobby" value="唱歌"/>唱歌
		 <hr />
		 <a href="javascript:void(0)" onclick="testById()">按照id获取dom</a>
		 <a href="javascript:void(0)" onclick="testByName()">按照name获取dom</a>
		 <a href="javascript:void(0)" onclick="testByTagName()">按照tag获取dom</a>
		 <a href="javascript:void(0)" onclick="testByClass()">按照class获取dom</a>

	</body>
	<script type="text/javascript">
		// 按照id
		function testById(){
			var p=document.getElementById('p1');
			console.log(p);
		}
		// 按照name
		function testByName(){
			var hobby=document.getElementsByName('hobby');
			console.log(hobby);
		}
		
		// 按照TagName
		function testByTagName(){
			var hobby=document.getElementsByTagName('input');
			console.log(hobby);
			for(var i=0;i<hobby.length;i++){
				console.log(hobby[i].value);
			}
		}
		
		// 按照class
		function testByClass(){
			var hobby=document.getElementsByClassName('para');
			console.log(hobby);
		}
		
	</script>
</html>
